<template>
  <div>
    <van-nav-bar title="搜索" left-arrow @click-left="$router.back()" />
    <van-search v-model="value" placeholder="请输入搜索关键词" />
    <span @click="searchBtn">搜索</span>
    <ul class="box">
      搜索历史
      <li
        v-for="(item, index) in searchList"
        :key="index"
        @click="btnClick(item)"
      >
        {{ item }}
      </li>
    </ul>
    <ul class="box1">
      搜索结果
      <li
        v-for="item in result"
        :key="item.id"
        @click="$router.push('/articleDetail/' + item.id)"
      >
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>



<script>
import { mySearch } from "../api/user";
export default {
  data() {
    return {
      value: "",
      searchList: [],
      result: [],
    };
  },
  methods: {
    searchBtn() {
      this.searchList.push(this.value);
      mySearch(this.value).then((res) => {
        console.log(res);
        this.result = res.data.data;
      });
    },
    // histroyBtn(item) {
    //   mySearch(item).then((res) => {
    //     console.log(res);
    //     this.result = res.data.data;
    //   });
    // },
    btnClick(item){
    mySearch(item).then(res=>{
      this.result=res.data.data
    })
  }
  },
  
};
</script>

<style lang="less" scoped>
.box {
  margin-top: 10px;
  border-top: 1px solid black;
}
.box1 {
  margin-top: 100px;
  border-top: 1px solid black;
}
</style>